<abp-page [title]="'AbpIdentity::Users' | abpLocalization" [toolbar]="data.items">
  <div id="identity-roles-wrapper" class="card">
    <div class="card-body">
      <div id="data-tables-table-filter" class="data-tables-filter mb-3">
        <div class="input-group">
          <input
            type="search"
            class="form-control"
            [placeholder]="'AbpUi::PagerSearch' | abpLocalization"
            [(ngModel)]="list.filter"
          />
        </div>
      </div>

      <abp-extensible-table
        [data]="data.items"
        [recordsTotal]="data.totalCount"
        [list]="list"
      ></abp-extensible-table>
    </div>
  </div>

  <abp-modal [(visible)]="isModalVisible" [busy]="modalBusy">
    <ng-template #abpHeader>
      <h3>{{ (selected?.id ? 'AbpIdentity::Edit' : 'AbpIdentity::NewUser') | abpLocalization }}</h3>
    </ng-template>

    <ng-template #abpBody>
      @if (form) {
        <form [formGroup]="form" (ngSubmit)="save()">
          <ul ngbNav #nav="ngbNav" class="nav-tabs">
            <li ngbNavItem>
              <a ngbNavLink>{{ 'AbpIdentity::UserInformations' | abpLocalization }}</a>
              <ng-template ngbNavContent>
                <abp-extensible-form [selectedRecord]="selected"></abp-extensible-form>
              </ng-template>
            </li>

            <li ngbNavItem>
              <a ngbNavLink>{{ 'AbpIdentity::Roles' | abpLocalization }}</a>
              <ng-template ngbNavContent>
                @for (roleGroup of roleGroups; track $index; let i = $index) {
                  <div class="form-check mb-2">
                    <abp-checkbox
                      *abpReplaceableTemplate="{
                        inputs: {
                          checkboxId: 'roles-' + i,
                          label: roles[i].name,
                          formControl: roleGroup.controls[roles[i].name]
                        },
                        componentKey: inputKey
                      }"
                      [checkboxId]="'roles-' + i"
                      [formControl]="roleGroup.controls[roles[i].name]"
                      [label]="roles[i].name"
                    >
                    </abp-checkbox>
                  </div>
                }
              </ng-template>
            </li>
          </ul>
          <div class="mt-2 fade-in-top" [ngbNavOutlet]="nav"></div>
        </form>
      } @else {
        <div class="text-center"><i class="fa fa-pulse fa-spinner" aria-hidden="true"></i></div>
      }
    </ng-template>

    <ng-template #abpFooter>
      <button type="button" class="btn btn-outline-primary" abpClose>
        {{ 'AbpIdentity::Cancel' | abpLocalization }}
      </button>
      <abp-button iconClass="fa fa-check" [disabled]="form?.invalid" (click)="save()">{{
        'AbpIdentity::Save' | abpLocalization
      }}</abp-button>
    </ng-template>
  </abp-modal>

  <abp-permission-management
    #abpPermissionManagement="abpPermissionManagement"
    *abpReplaceableTemplate="
      {
        inputs: {
          providerName: { value: 'U' },
          providerKey: { value: providerKey },
          visible: { value: visiblePermissions, twoWay: true }
        },
        outputs: { visibleChange: onVisiblePermissionChange },
        componentKey: permissionManagementKey
      };
      let init = initTemplate
    "
    [entityDisplayName]="entityDisplayName"
    (abpInit)="init(abpPermissionManagement)"
  >
  </abp-permission-management>
</abp-page>
